<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>材料追溯工单</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
        .layui-form-label {
            width: auto !important;
        }

        .operation span:last-of-type {
            color: #F5222D;
        }

        .pageNav {
            margin: 0 auto;
            width: fit-content;
        }

        .pageNav a,
        .operation span {
            cursor: pointer;
            display: inline-block;
        }

        cite {
            cursor: default;
        }
        td {
            white-space: nowrap;
            text-align: center;
        }
    </style>
</head>
<body>
<script src="./js/main.js" charset="utf-8"></script>
<script src="./layui/laydate/laydate.js" charset="utf-8"></script>
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/jQuery.main.js"></script>

<form class="layui-form" action="" lay-filter="data">
    <div class="layui-form-item">
        <div class="layui-inline" >
            <label class="layui-form-label">搜索：</label>
        </div>
        <div class="layui-input-inline " style="width: 15em">
            <select name="deptName" id="deptName" lay-verify="required" lay-filter="deptName">
            </select>
        </div>
        <div class="layui-inline">
            <input type="text" id="stuffNum" name="stuffNum" class="layui-input" style="width: 14em;" placeholder="材料批号(例如铜线、胶水等)" value="">
        </div>
        <div class="layui-inline">
            <input type="text" id="coreNum" name="coreNum" class="layui-input" style="width: 14em;" placeholder="CORE批号" value="">
        </div>
        <div class="layui-inline" style="margin: 3px">
            <label class="layui-form-label">完工时间:</label>
            <div class="layui-inline" id="dateDiv">
                <div class="layui-input-inline">
                    <input type="text" id="startDate" class="layui-input" placeholder="开始日期">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" id="endDate" class="layui-input" placeholder="结束日期">
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <input type="text" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="10">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">搜索工单</button>
        </div>
    </div>
</form>
<span>★ 使用过&nbsp;<b style="color:#ff0000;" id="stuffName"></b>&nbsp;和&nbsp;<b style="color:#ff0000;" id="coreName"></b>&nbsp;的共有：<b style="color:#ff0000;" id="totalAmount"></b>&nbsp;张工单.</span>
<table class="layui-table">
    <thead>
    <tr>
        <!--        <th>ID</th>-->
        <th style="text-align: center">工单号</th>
        <th style="text-align: center">品名</th>
        <th style="text-align: center">父工单</th>
        <th style="text-align: center">作用工序</th>
        <th style="text-align: center">当前工序</th>
        <th style="text-align: center">完工时间</th>
        <th style="text-align: center">接收/投入数量</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<div style="display: flex;">
    <div style="flex: 1">
        <div class="pageNav">
          <span class="layui-breadcrumb" lay-separator="-">
            <a class="fristPage">首页</a>
            <a class="lastPage">上一页</a>
            <a><cite>第<span id="page"></span>页</cite></a>
            <a class="nextPage">下一页</a>
            <a class="endPage">尾页</a>
          </span>
        </div>
    </div>
</div>

<script type="text/javascript">
    var displayStart = 1;
    var endPage = null;
    var layer = layui.layer;
    var form = null;
    var list = null;

    laydate.render({
        elem: '#dateDiv'
        //设置开始日期、日期日期的 input 选择器
        //数组格式为 5.3.0 开始新增，之前版本直接配置 true 或任意分割字符即可
        ,range: ['#startDate', '#endDate']
    });
    layui.use(['form', 'element'], function() {
        form = layui.form;
        $.ajax({
            url: url + '/sys-dept/listDept',
            method: 'POST',
            async : false,
            contentType: 'application/json',
            success: function(res) {
                //显示前先判断是否为管理员
                $.ajax({
                    url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
                    method: 'GET',
                    async : false,
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.code===200){
                            isAd=1;
                        }
                        else if (res.code===400){
                            isAd=0;
                            thisDept=res.data.dept;
                        }
                    }
                })
                //按照是否为管理员显示下拉框
                if (res.code == 200) {
                    for (var i = 0; i < res.data.length; i++) {
                        if(isAd===1){
                            $("#deptName").append("<option value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>");
                        }else if (isAd===0&&res.data[i].dept===thisDept){
                            $("#deptName").append("<option selected='selected' value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>").attr('disabled','disabled');
                        }
                    }
                    form.render('select');
                }
            }
        })
        form.on('submit(searchBtn)', function() {
            search(1,'desc');
            return false;
        });
        $('.fristPage').click(function() {
            search(1,'desc');
            return false;
        });
        $('.lastPage').click(function() {
            search((displayStart > 1 ? displayStart - 1 : 1),'desc');
            return false;
        });
        $('.nextPage').click(function() {
            search((displayStart < endPage ? displayStart + 1 : endPage),'desc');
            return false;
        });
        $('.endPage').click(function() {
            search(endPage,'desc');
            return false;
        })

    })


    //时间排序方法
    function sortTimeOfReport(data) {
        search(1,data)
    }

    function search(index,status) {
        if($('#stuffNum').val()===""&&$('#coreNum').val()===""){
            layer.msg("请先选择您想查询的材料批号或者core批号!")
        }else {
            if (!index) var index = displayStart;
            var data = form.val('data');
            data.displayStart = index;
            data.desc=status;
            data.userId=sessionStorage.getItem('userId');
            data.startDate=$('#startDate').val();
            data.endDate=$('#endDate').val();
            $.ajax({
                url: url + '/report-order/checkOfStuff',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function(res) {
                    $('tbody').empty();
                    displayStart = res.data.current;
                    endPage = res.data.pages;
                    list = res.data.records;
                    if(res.data.records.length==0){
                        $('#totalAmount').html(0)
                    }else {
                        for (var i = 0; i < res.data.records.length; i++) {
                            $('tbody').append(
                                "<tr>" +
                                "<td style='color: #1E9FFF;'>" + res.data.records[i].orderNum + "</td>" +
                                "<td style='color: #1E9FFF;'>" + res.data.records[i].pinName + "</td>" +
                                "<td style='color: #1E9FFF;'>" + res.data.records[i].lotNo + "</td>" +
                                "<td style='color:#1E9FFF;'>" + res.data.records[i].processName+ "</td>" +
                                "<td style='color:#1E9FFF;'>" + res.data.records[i].nowProcess+ "</td>" +
                                "<td>" + res.data.records[i].overTime.replace('T', ' ') + "</td>" +
                                "<td style='color:#1E9FFF;'>" + res.data.records[i].acceptAmount + "</td>" +
                                "</tr>"
                            );
                            $('#totalAmount').html(res.data.records[i].totalAmount)
                        }
                    }
                    $('#stuffName').html($('#stuffNum').val())
                    $('#coreName').html($('#coreNum').val())
                    $('#page').html(displayStart)
                }
            })
        }
    }
</script>
</body>
</html>